<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>仓库管理界面</title>
		<link rel="stylesheet" href="${ctx}/css/H-ui.min.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		<style>
			.Administration{width: 100%;height: 90%;background: #f8f8f8;margin:0;position: relative;}
		    .Administration>p{display: flex;height: 50px;line-height: 50px;border-bottom: 1px solid #efefef;}
		    .Administration>p span{cursor: pointer;}
		    .ulhidden{display:none;position: absolute;top:56px;left:425px;width: 150px;border:1px solid #CCCCCC}
		    .ulhidden li{height: 30px;text-align: center;line-height: 30px;}
		    .ulhidden li:hover{background: #4995ee;color: #FFFFFF;}
		    .state{height: 70px;border-bottom: 1px solid #efefef;display: flex;justify-content: space-between;line-height: 70px;}
		    .state .img2{width: 42.5%;display: inline-block;}
		    .search{position: relative;}
		    .search input{padding-left:30px;height: 20px;border:1px solid #dddddd;border-radius: 10px;}
		    .search img{display: inline-block;width: 15%;position: absolute;left:0;top:24px}
		    .content{height: 500px;background: #c7dde0;}
            .conent_item{display: flex;height: 150px;width: 31%;margin-top:150px;margin-left: 18px;padding:0;box-sizing: initial;}
            .conent_item>p{background: #fff;height: 150px;width: 40%;margin-bottom: 0;}
            .conent_item>p img{left:0;right:0;margin:auto;display: block;margin-top:35px;}
            .conent_item .fr{background: #f3f3f3;width: 60%;}
		    .conent_item span{font-size: 12px;}
		    .conent_item:hover{border:2px solid #59ade0;cursor: pointer;}
		    .list{width: 95%;height: 95%;background: #FFFFFF;border:1px solid #CCCCCC;padding-left: 0;padding-right: 0;}
		    .list table tr{border-bottom: 1px solid #CCCCCC;height: 40px;line-height: 30px;}
		    .list table tr:hover{background: #d2e2fd;} 
		    .list table td:nth-of-type(2) {color: #638fe8;}
		    .list table td:nth-of-type(2):hover{color: #000000;}  
		</style>

		<style>
			p {
				margin-bottom: 0;
				font-size: 11px;
			}

			.stock, .list {
				margin: 20px auto;
				clear: both;
				overflow: hidden;
			}

			.stock ul {
				display: flex;
			}

			.stock ul li:nth-of-type(2) img {
				width: 80%;
			}

			.stock ul li {
				margin-left: 15px;
				cursor: pointer;
			}

			.item_name {
				height: 60px;
				background: #CCCCCC;
			}

			.item_name p {
				margin-bottom: 0;
			}

			.item_name span {
				color: #FF0000;
			}

			.stock h6 {
				display: none;
				font-size: 12px;
				font-weight: normal;
				text-align: right;
				height: 50px;
				background: rgba(0, 0, 0, 0.5);
				line-height: 50px;
				margin: 0;
				color: #fff;
			}

			.relative img {
				display: block;
				width: 100%;
			}

			.row2 {
				margin-top: 10px;
				clear: both;
				overflow: hidden;
			}

			.row {
				clear: both;
				overflow: hidden;
			}

			.Hidden {
				display: flex;
				justify-content: space-between;
			}

			.Apply {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
			}

			.Apply a {
				font-size: 10px;
				color: yellow;
				display: flex;
			}

			.Apply a:hover {
				color: yellow;
				text-decoration: none;
			}

			.Apply label {
				font-size: 10px;
				display: flex;
			}

			.Apply label input {
				width: 100px;
			}

			table tr {
				border-bottom: 1px solid #CCCCCC;
				height: 50px;
			}

			.Click {
				display: flex;
				height: 50px;
				line-height: 32px;
			}

			.Click ul {
				display: flex;
				margin: 10px 0;
			}

			.Click ul:nth-of-type(1) li:nth-of-type(2) img {
				width: 18%;
			}

			.Click ul li:nth-of-type(2) {
				margin-left: 10px;
				color: #D6D6D6;
			}

			.text-c {
				position: relative;
			}

			.hideimg {
				position: absolute;
				top: 36px;
				left: 359px;
				z-index: 1;
				display: none;
			}

			body>p {
				height: 50px;
				text-align: center;
				line-height: 50px;
				border-bottom: 1px solid #EAEAEA;
				font-size: 16px;
			}

			.ullist {
				display: flex;
				justify-content: space-around;
			}

			.ullist li {
				cursor: pointer;
				color: #D6D6D6
			}

			.ullist li img {
				width: 15%;
			}

			.seainput {
				height: 30px;
				border: 1px solid #3399ff;
				width: 20%;
				border-radius: 12px;
				margin-top: 9px;
			}
		</style>
	</head>
	<body>
	<div class="container Administration">
			<p>
				<a href="kucun_cangku.jsp">返回</a>
				<span style="text-indent: 35em;" id="showSpen">仓库管理</span>
			</p>
			<ul class="ulhidden">
				<li>仓库管理</li>
				<li>库存调拨</li>
			</ul>
			<div class="container Click">
				<ul>
					<li><img src="${ctx}/imgs/lb.png" alt="" id="clickSpan"
							 style="cursor: pointer; width: 18%" /></li>
					<li><img src="${ctx}/imgs/sx.png" alt="" />刷新</li>
				</ul>
				<ul class="ullist" style="width: 50%; margin-left: 50px;">
					<li class="icon01"><img src="${ctx}/imgs/icon08.png" alt="" onclick="ShowDiv('xinjian','fade')"/>添加</li>
					<li class="icon02"><img src="${ctx}/imgs/icon09.png" alt=""
											width="15%" />删除</li>
					<li class="icon03"><img src="${ctx}/imgs/icon_10.png" alt="" />修改</li>
				</ul>
				<input type="text" name="" class="seainput"
					   placeholder="请输入产品名称">
			</div>
			<div class="row content ck_active" id="stock22">
				<c:if test="${kcCangkuList !=null }">
					<c:forEach items="${kcCangkuList}" var="kcCangku">
						<div class="col-sm-4 conent_item">
							<p>
								<img src="${ctx}/imgs/kc_03.png" alt="" />
							</p>
							<div class="fr">
					  			<span>${kcCangku.cangkuName }</span>
					 			<br><br>
					  			<span>${kcCangku.cangkuPerson}</span>
							</div>
						</div>
					</c:forEach>
				</c:if>


			</div>
			<div class="container list" id="list22" style="display: none;">
			<table border="0" cellspacing="" cellpadding="">
				<c:if test="${kcCangkuList !=null }">
					<c:forEach items="${kcCangkuList}" var="kcCangku">
						<tr class="text-c">
							<td><input type="checkbox" /></td>
							<td style="color: #000000;">${kcCangku.cangkuName }</td>
							<td>${ kcCangku.cangkuPerson}</td>
							<td>${ kcCangku.cangkuAddress}</td>
						</tr>
					</c:forEach>
				</c:if>
			</table>
		    </div>
		</div>
		
		<script type="text/javascript">
		
		
		
		 //ulhidden显示与隐藏的方法：
			$(function(){
				var isShow = true;
				$('#showSpen').mouseover(function(){
					$('.ulhidden').show();
				});
				$('.ulhidden').mouseover(function(){
					isShow = true;
					$(this).show();
				});
				$('.ulhidden').mouseout(function(){
					if(isShow){
						$(this).hide();
						isShow = false
					}
				})
			});
			//点击
				$(function(){
        		$('#button').click(function(){
        			var status = $('#stock22').css('display');//获取当前div的状态，是隐藏还是显示的
        			console.log(status);
        			if(status == 'block'){
        				
        				$('#stock22').hide();
        				$("#list22").show();
        				
        			}else{
        				
        				$('#stock22').show();
        				$("#list22").hide();
        			}
        			
        		})
        	})
		</script>
		
	</body>
</html>
